<template>
  <div class="container">
    <el-tabs>
      <el-tab-pane>
        <span slot="label">我的行程</span>
        <div class="btn-role">
          <el-button
            type="primary"
            @click="onAddRole"
          >
            新增角色
          </el-button>

          <el-dialog
            title="编辑角色"
            :visible.sync="dialogTableVisible"
            width="400px"
            @close="onRoleDetailClose"
          >
            <el-form
              ref="form"
              v-loading="loadingAddEmployee"
              :model="addEmployee"
              :rules="rules"
              label-width="80px"
            >
              <el-form-item
                label="角色名称"
                prop="name"
              >
                <el-input
                  v-model="addEmployee.name"
                />
              </el-form-item>
              <el-form-item
                label="角色描述"
                prop="description"
              >
                <el-input
                  v-model="addEmployee.description"
                />
              </el-form-item>
              <span>
                <el-button
                  type="primary"
                  @click="onEnsure"
                >
                  确定
                </el-button>
                <el-button>取消</el-button>
              </span>
            </el-form>
          </el-dialog>
        </div>
        <el-table
          :data="roleemployeeList.rows"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="index"
            label="序号"
            width="180"
            align="center"
          />
          <el-table-column
            prop="name"
            label="角色"
            width="180"
            align="center"
          />
          <el-table-column
            prop="description"
            label="描述"
            width="300"
            align="center"
          />
          <el-table-column
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                type="success"
                @click="onPermissionClick(scope.row.id)"
              >
                分配权限
              </el-button>
              <el-button
                type="primary"
                @click="onRedactRole(scope.row.id)"
              >
                编辑
              </el-button>
              <el-button
                type="danger"
                @click="onDeleteRole(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :page-size="5"
            layout="total, prev, pager, next"
            :total="roleemployeeList.total"
            @current-change="handleCurrentChange"
          />
        </div>
        <!-- 分配权限 -->
        <el-dialog
          title="分配权限"
          :visible.sync="apportionPermission"
          width="400px"
          @close="onPermissionClose"
        >
          <el-tree
            :data="permission"
            :props="{
              children: 'children',
              label: 'name',
            }"
            show-checkbox
            node-key="id"
            ref="permissionlistok"
            @node-click="permissionNodeClick"
            default-expand-all
          />
          <div class="buttons">
            <el-button
              @click="getCheckedKeys"
              type="primary"
            >
              确定
            </el-button>
            <el-button @click="setCheckedNode">取消</el-button>
          </div>
        </el-dialog>
        <!-- 编辑角色 -->
        <el-dialog
          title="编辑角色"
          :visible.sync="amendRole"
          width="400px"
          @close="onRoleDetailClose"
        >
          <el-form
            :rules="rules"
            label-width="80px"
          >
            <el-form-item
              label="角色名称"
              prop="name"
            >
              <el-input
                v-model="Permissionvalue.name"
              />
            </el-form-item>
            <el-form-item
              label="角色描述"
              prop="description"
            >
              <el-input
                v-model="Permissionvalue.description"
              />
            </el-form-item>
            <span>
              <el-button
                type="primary"
                @click="onAmendRole"
              >
                确定
              </el-button>
              <el-button>取消</el-button>
            </span>
          </el-form>
        </el-dialog>

      </el-tab-pane>

      <el-tab-pane label="公司信息" name="second">
        <div class="reminder">
          <i class="el-icon-share" />
          对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改
        </div>
        <!-- <el-radio-group size="small">
          <el-radio-button label="right">右对齐</el-radio-button>
        </el-radio-group> -->
        <div style="margin: 20px;" />
        <el-form label-width="80px">
          <el-form-item label="公司名称">
            <el-input
              placeholder="江苏传智播客教育科技股份有限公司"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="公司地址">
            <el-input
              placeholder="北京市昌平区建材城西路金燕龙办公楼一层"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="公司邮箱">
            <el-input
              placeholder="bd@itcastcn"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              placeholder="bd@itcastcn"
              :disabled="true"
              type="textarea"
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
import * as roleApi from '@/api/role'
export default {
  name: 'CompanySetting',
  data() {
    return {
      page: 1,
      pagesize: 5,
      dialogTableVisible: false,
      amendRole: false,
      apportionPermission: false,
      loadingAddEmployee: false,
      permids: [],
      // 新增角色
      addEmployee: {
        name: '',
        description: ''
      },
      // 编辑角色
      Permissionvalue: {
        name: '',
        description: ''
      },
      rules: {
        name: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.updateroleemployeeList({
      page: this.page,
      pagesize: this.pagesize
    }),
    this.updatePermissionList()
    console.log(this.permission);
  },
  computed: {
    // 公司角色列表
    ...mapState('roleemployee', [
      'roleemployeeList'
    ]),
    // 个人角色信息
    ...mapState('role', [
      'personageroleList',
      // 权限列表
      'permissionList'
    ]),
    ...mapGetters('role', [
      'permission'
    ])
  },
  methods: {
    // 公司角色列表
    ...mapActions('roleemployee', [
      'updateroleemployeeList'
    ]),
    // 个人角色信息
    ...mapActions('role', [
      'updatepersonageroleList',
      'updatePermissionList'
    ]),
    // 当前页
    handleCurrentChange(val) {
      this.page = val
      this.updateroleemployeeList({
        page: this.page,
        pagesize: this.pagesize
      })
    },
    // 新增角色弹窗
    onAddRole() {
      this.dialogTableVisible = true
    },
    // 新增角色
    async onEnsure() {
      this.loadingAddEmployee = true
      await roleApi.postRole(this.addEmployee)
      this.loadingAddEmployee = false
      this.$message({
        type: 'success',
        message: '新增成功!'
      })
    },
    // 分配权限弹窗
    async onPermissionClick(id) {
      await this.updatepersonageroleList(id)
      this.permids = this.personageroleList.permIds
      this.apportionPermission = true
      this.$nextTick( ()=> {
        this.$refs.permissionlistok.setCheckedKeys(this.permids)
      })
    },
    // 权限确定修改
    getCheckedKeys() {
      this.permids = this.$refs.permissionlistok.getCheckedKeys()
      roleApi.putPermission({
        id: this.personageroleList.id,
        permIds: this.permids
      })
      .then(msg => {
        this.$message.success(msg)
        this.onPermissionClose()
      })
      .catch(msg => this.$message.error(msg))
    },
    onPermissionClose() {
      this.apportionPermission = false
    },
    // 权限确定取消
    setCheckedNode() {
      this.onPermissionClose()
    },
    // 权限回调
    permissionNodeClick(data) {
      console.log(data);
    },
    // 编辑
    async onRedactRole(id) {
      // 角色个人信息
      await this.updatepersonageroleList(id)
      this.Permissionvalue.name = this.personageroleList.name
      this.Permissionvalue.description = this.personageroleList.description
      this.amendRole = true
    },
    // 编辑角色确定
    onAmendRole() {
      roleApi.putRole({
        companyId: this.personageroleList.companyId,
        description: this.addEmployee.description,
        id: this.personageroleList.id,
        name: this.addEmployee.name,
        permIds: this.personageroleList.permIds
      })
      .then(msg => this.$message.success(msg))
      .catch(msg => this.$message.error(msg))
    },
    onRoleDetailClose() {
      this.loadingAddEmployee = false
    },
    // 删除角色弹窗
    onDeleteRole(id) {
      this.$confirm('确定删除该用户？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          roleApi.deleteRole(id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
$a:#f4f4f5;
$b:#9b9ea3;
.container {
  padding: 0 16px;

  .btn-role {
    margin-bottom: 22px;
  }

  .buttons {
    text-align: center;
  }
}

// 第二页
.reminder {
  background-color: $a;
  padding: 8px 8px;
  color: $b;
  font-size: 14px;
}
</style>
